<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>报表</title>

<%@ include file="/app/includes/header.jsp"%>
<script type="text/javascript">
	function mergeCell(data, mergeCols) {
		function valueEquals(rows, index, current, mergeCols, colsIndex) {
			for (var c = colsIndex; c >= 0; --c) {
				if (rows[index][mergeCols[c]] != rows[current][mergeCols[c]]) {
					return false;
				}
			}
			
			return true;
		}
		
		var rows = data.rows;
		var rowSize = rows.length;
		
		if (rowSize > 0) {
			for (var c = mergeCols.length - 1; c >= 0; --c) {
				var col = mergeCols[c];
				var index = 0;
				var rowspan = 1;
			 
				for (var i = 1; i < rowSize; ++i) {
					if (valueEquals(rows, index, i, mergeCols, c)) {
						rowspan++;
					} else {
						if (rowspan > 1) {
							$('#table').datagrid('mergeCells', {
								index : index,
								field : col,
								rowspan : rowspan,
								colspan : null
							});
						}
						index = i;
						rowspan = 1;
					}
					
					if (i == rowSize - 1 ) {
						if (rowspan > 1) {
							$('#table').datagrid('mergeCells', {
								index : index,
								field : col,
								rowspan : rowspan,
								colspan : 1
							});
						 }
					}
				}
			}
			
		}
	}
	
	$(function() {
		$('#table').datagrid({
			title : '用户列表',
			iconCls : 'icon-datalist',
			nowrap : true,
			striped : true, 
			collapsible : true,
			singleSelect : true,//只能选一行
			url : 'datagrid_data3.json',
			columns : [ [ {
				field : 'id',
				title : '编号',
				width : 40,
				styler:function(value,row,index){
					return 'background:#fafafa';
				}
			}, {
				field : 'name',
				title : '名称',
				width : 50,
				styler:function(value,row,index){
					return 'background:#fafafa';
				}
			}, {
				field : 'num',
				title : '数量',
				width : 50,
				styler:function(value,row,index){
					return 'background:#fafafa';
				}
			}, {
				field : 'price',
				title : '价格',
				width : 250	
			}, {
				field : 'addr',
				title : '地址',
				width : 250	
			}]],
			onLoadSuccess:function(data){
				var mergeCols = ["id", "name", "num"];
				mergeCell(data, mergeCols);
			}
		});
	});
</script>
</head>
<body>
	<div id="table"></div>
</body>
</html>